<template>
  <div class="systemOperationLog">
    <div class="filter-container">
      <el-select
        v-model="listQuery.search.system_id"
        placeholder="选择系统"
        clearable
        style="width: 220px"
        class="filter-item"
      >
        <el-option
          v-for="item in systemOptions"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
      <el-input
        v-model="listQuery.search.url"
        placeholder="访问地址"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%;margin-bottom: 20px;"
    >
      <el-table-column label="日志ID" min-width="100px" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.id || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系统ID" width="80px" align="right">
        <template slot-scope="scope">
          <span>{{ scope.row.system_id || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属系统" width="180px" align="left">
        <template slot-scope="scope">
          <el-tag style="cursor: pointer;" type="warning" effect="dark">
            <span @click="handleSystemDetail(scope.row.system_id)">{{
              scope.row.system ? scope.row.system.name || '-' : '-'
            }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作人员" width="160px" align="left">
        <template slot-scope="scope">
          <el-tag style="cursor: pointer;" type="success" effect="dark">
            <span>{{ scope.row.user ? scope.row.user.name || '-' : '-' }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="ip" width="160px" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.ip || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="url" width="200px" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.url || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        :min-width="settings['tableWidth']['timeYMS']"
        align="left"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.create_at | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            content="查看详情"
            placement="bottom"
          >
            <el-button
              type="success"
              size="mini"
              icon="el-icon-view"
              circle
              @click="handleDetail(row.id)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { MessageBox } from 'element-ui'
import { opSearch, opView } from '@/api/system/operation-log'

import { systemGetSystemList } from '@/api/system/system'
import { parseTimeJS as parseTime } from '@/utils'
import { cloneDeep } from 'lodash'

@Component({
  name: 'systemOperationLog',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private systemOptions: any[] = []
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getSystemList()
  }
  mounted() {
    //mounted 钩子
    this.getList()
  }
  // 表loading状态
  private listLoading: boolean = false
  private list = []
  private total = 0
  // 公共查询对象
  private listQuery = {
    limit: 10,
    page: 1,
    search: {
      system_id: undefined,
      url: ''
    },
    orderby: {
      field: 'id',
      direction: 'DESC'
    }
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.getList()
  }
  // size切换查询
  private handleSizeChange(val: any) {
    this.getList()
  }
  private async getList() {
    this.listLoading = true
    // ajax 请求相应list
    const { data } = await opSearch(this.listQuery)
    this.list = cloneDeep(data.list)
    this.total = Number(data.total)
    this.listLoading = false
  }
  private handleFilter() {
    this.getList()
  }
  //下载
  private handleDownload() {}
  private async getSystemList() {
    // ajax 请求相应list

    this.systemOptions = []
    const { data } = await systemGetSystemList()
    data.list.forEach((item: any) => {
      this.systemOptions.push({
        key: item.id,
        value: item.name
      })
    })
  }
  // 查看操作日志详情
  private handleDetail(id: string) {
    this.$router.push({
      path: '/system/operation-log/detail?id=' + id
    })
  }
  // 查看子系统详情
  private handleSystemDetail(id: string) {
    this.$router.push({
      path: '/system/system/detail?id=' + id
    })
  }
}
</script>

<style lang="scss" scoped>
.systemOperationLog {
  padding: 20px;
}
.el-select {
  width: 100%;
}
</style>
